<script lang="ts" setup>
import QrCode from '@/components/qrcode/QrCode.vue'
import { getFlag } from '@/stores/app'
import { getQrcodeLoginKey } from '@/stores/auth'

const flag = getFlag()
// 二维码对应的字符串
const qrKey = getQrcodeLoginKey()
</script>

<template>
  <div class="scan-container">
    <h1>扫一扫</h1>
    <QrCode :value="qrKey" :size="150" :coverage="0.25" color="#0074d9" />
    <button class="refresh-qrcode">刷新</button>
    <p class="inline-tip">请通过手机客户端扫描屏幕上的二维码登陆</p>
    <div class="to-regist">
      <span class="inline-text">还没有账号？</span>
      <a class="text-bt" @click="flag = true">立刻注册</a>
    </div>
    
  </div>
</template>

<style lang="scss" scoped>
@import url(./base.scss);

.scan-container {
  width: 100%;
  height: 100%;
  margin-top: 29%;
  display: flex;
  flex-direction: column;
  align-items: center;
  h1 {
    color: #ffffff;
    padding: 20px;
  }
  p.inline-tip {
    margin-top: 3px;
    margin-bottom: 9px;
    width: 100%;
  }
  .refresh-qrcode {
    margin: 9px;
    border-color: rgb(74, 124, 181);
    background-color: rgb(74, 124, 181);
    &:active {
      border-color: #ffffff;
    }
  }
}
.to-regist {
  width: 85%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  span {
    white-space: nowrap;
    color: rgb(0, 0, 0);
  }
  a {
    color: blue !important;
  }
}

 
</style>
